HTMLInputElement: files-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die HTMLInputElement.files-Eigenschaft ermöglicht den Zugriff auf das FileList-Objekt, das mit dem <input type="file">-Element ausgewählt wurde.

Wert

Ein FileList-Objekt, das die ausgewählten Dateien auflistet, falls vorhanden, oder null, wenn der HTMLInputElement nicht vom type="file" ist.

Das folgende Beispiel zeigt, wie Sie auf die HTMLInputElement.files-Eigenschaft zugreifen und den Namen, das Datum der letzten Änderung, die Größe und den Typ jeder vom Benutzer ausgewählten Datei protokollieren können.

HTML

html

<input id="files" type="file" multiple />

JavaScript

Beachten Sie, dass HTMLInputElement.files immer noch eine Instanz von FileList zurückgibt, selbst wenn keine Dateien ausgewählt sind. Daher ist es sicher, sie mit for...of zu durchlaufen, ohne zu überprüfen, ob Dateien ausgewählt sind.

const fileInput = document.getElementById("files");

console.log(fileInput.files instanceof FileList); // true even if empty

for (const file of fileInput.files) {
  console.log(file.name); // prints file name
  let fileDate = new Date(file.lastModified);
  console.log(fileDate.toLocaleDateString()); // prints legible date
  console.log(
    file.size < 1000 ? file.size : `${Math.round(file.size / 1000)}KB`,
  );
  console.log(file.type); // prints MIME type
}

Spezifikationen

Specification
HTML # dom-input-files-dev

Browser-Kompatibilität

Siehe auch

DataTransfer.files